<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            width: 1126px;
            margin: 0 auto;
        }

        .wrap .nav {
            display: flex;
            text-align: center;
            line-height: 45px;
        }

        .wrap .nav li {
            flex: 1;
            border: 1px solid #333;
        }

        .wrap .nav li:not(:first-child) {
            border-left: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <ul class="nav">
            <li>item_01</li>
            <li>item_02</li>
            <li>item_03</li>
            <li>item_04</li>
            <li>item_05</li>
            <li>item_06</li>
            <li>item_07</li>
            <li>item_08</li>
            <li>item_09</li>
            <li>item_10</li>
        </ul>
    </div>
</body>
<script>
    // 需求 => 多元素绑定事件,点击li 返回该元素及其下标
    // (1) 如何给多元素绑定事件  => 循环遍历 得到每一个元素 =>再绑定事件
    // (2) 多元素绑定事件的问题 
    //  a. 页面加载时, 事件只做绑定(只是约定好了点击时要执行的内容 => 点击时才会执行),循环会继续向后执行  => 等页面加载完毕 全局的i和li:   i => 6   li => <li>item_06</li>
    //  b. 点击li时: 会执行函数的上下文 => console.log(li,i)  自己没有,向外跳一层 找全局作用域里的li 和 i  =>  i => 6   li => <li>item_06</li>

    // 如何解决?
    // (1) 需要替换的方案  
    // li =>  this (在事件中 执行绑定事件的元素)
    // i  =>  在遍历的过程中 提前为每一个li设置自定义属性 data-index  存储当前元素的下标  => 点击时对应当前元素获取

    // debugger;  // 页面加载时的流程
    var liList = document.querySelectorAll(".nav li");
    console.log(liList);
    
    for (var i = 0; i < liList.length; i++) {
        var li = liList[i];
        li.setAttribute("data-index",i);
        li.onclick = function () {
            // debugger;
            var index = this.getAttribute("data-index");
            console.log(this, index);
        }
    }

    console.log("页面加载完毕",li,i);


    // liList[0].onclick = function(){} 
    // liList[1].onclick = function(){} 
    // liList[2].onclick = function(){} 
    // liList[3].onclick = function(){} 
    // liList[4].onclick = function(){} 
    // liList[5].onclick = function(){} 


</script>

</html>